<template>
  <div class="addSpace">
    <!-- 新增空间 -->
    <showBanner class="white"></showBanner>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import showBanner from '@/base/showBanner/showBanner'
export default {
  name: 'addSpace',
  components: {
    showBanner
  },
  data () {
    return {
      id: '',
      uploadImgUrl: '/api/file/uploadImg',
      keyword: '',
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      dialogVisible: false,
      location: '杭州',
      activeNum: 1,
      multiple: true,
      formDate: [],
      isShow2: false,
      isShow1: false,
      inputVisible: false,
      inputVisible1: false,
      checked: true,
      check2: false,
      check1: true,
      checkSBT: false,
      checkXBT: false,
      showRoom: true,
      type: '',
      imageUrl: '',
      architecturalStyle: '',
      feature: '',
      checklist: [],
      spaceId: '',
      imgUrl: [],
      addSteps: '',
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      architecturalStyleList: [],
      featureList: [],
      typeList: [
        {
          value: 1,
          label: '民宿'
        }, {
          value: 2,
          label: '咖啡馆'
        }, {
          value: 3,
          label: '创意空间'
        }, {
          value: 4,
          label: '其他'
        }
      ],
      checkLists: [
        { id: 1, name: '闪光灯' },
        { id: 2, name: '反光板' },
        { id: 3, name: '柔光箱' },
        { id: 4, name: '柔光伞' },
        { id: 5, name: '视频灯' }
      ],
      facDatas: ['衣架', '落地衣架', '挂烫机', 'Wi-Fi', '免费停车'
      ],
      spaceInfoform: {
        spaceName: '',
        avatar: '',
        cover: '',
        mobile: '',
        title: '',
        description: '',
        address: ''
      },
      spaceInfoformImg: {
        type: 1,
        des: '',
        roomName: '公共区域',
        paths: [],
        rooms: [{
          type: 2,
          des: '',
          roomName: '',
          paths: []
        }],
        ypList: [{
          type: 3,
          des: '',
          roomName: '',
          paths: []
        }]
      },
      costPoints: {},
      costPoints2: {},
      costPoints3: {},
      costPoints4: {},
      costPoints5: {},
      costPoints6: {},
      spaceInfoformPrice: {
        startTime: '08:00',
        endTime: '18:00',
        publicPrice: '',
        roomPrice: '',
        maxPeople: '',
        admissionEquipment: [],
        publicWeekendPrice: '',
        roomWeekendPrice: '',
        maxPeopleWeekend: '',
        admissionEquipmentWeekend: [],
        startTimeAm: '08:00',
        endTimeAm: '12:00',
        publicPriceHalfAm: '',
        roomPriceHalfAm: '',
        maxPeopleAm: '',
        admissionEquipmentAm: [],
        publicWeekendPriceHalfAm: '',
        roomWeekendPriceHalfAm: '',
        maxPeopleAmWeekend: '',
        admissionEquipmentAmWeekend: [],
        startTimePm: '14:00',
        endTimePm: '18:00',
        publicPriceHalfPm: '',
        roomPriceHalfPm: '',
        maxPeoplePm: '',
        admissionEquipmentPm: [],
        publicWeekendPriceHalfPm: '',
        roomWeekendPriceHalfPm: '',
        maxPeoplePmWeekend: '',
        admissionEquipmentPmWeekend: []
      },
      spaceInfoformService: {
        stayPriceFc: '',
        stayPriceMd: '',
        lunchPriceFc: '',
        lunchPriceMd: '',
        dinnerPriceFc: '',
        dinnerPriceMd: '',
        facilities: [],
        notes: ''
      }
    }
  },
  watch: {
  },
  created () {
    if (this.$route.query.addSteps == null) {
      this.activeNum = 1
    } else {
      this.activeNum = this.$route.query.addSteps + 1
    }
    if (this.$route.query.type === 1) {
      this.showRoom = true
    } else {
      this.showRoom = false
    }
    // console.log(this.activeNum)
  },
  mounted () {
  },
  computed: {
    rules () {
      let obj = {
        spaceName: [
          { required: true, message: '请输入空间名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入空间标题', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入正确手机号码', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确手机号码' }
        ],
        description: [
          { required: true, message: '请输入空间简介', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入空间地址', trigger: 'blur' }
        ]
      }
      return obj
    },
    rules1 () {
      let obj = {
      }
      return obj
    },
    rules2 () {
      let obj = {
        publicPrice: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' }
        ],
        maxPeople: [
          {
            required: true, message: '请输入房间价格', trigger: 'blur'
          }
        ],
        publicPriceHalfAm: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' }
        ],
        maxPeopleAm: [
          {
            required: true, message: '请输入房间价格', trigger: 'blur'
          }
        ],
        publicPriceHalfPm: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' }
        ],
        maxPeoplePm: [
          {
            required: true, message: '请输入房间价格', trigger: 'blur'
          }
        ],
        publicWeekendPrice: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' }
        ],
        maxPeopleWeekend: [
          {
            required: true, message: '请输入节假日房间价格', trigger: 'blur'
          }
        ],
        publicWeekendPriceHalfAm: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' }
        ],
        maxPeopleAmWeekend: [
          {
            required: true, message: '请输入节假日房间价格', trigger: 'blur'
          }
        ],
        publicWeekendPriceHalfPm: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' }
        ],
        maxPeoplePmWeekend: [
          {
            required: true, message: '请输入节假日房间价格', trigger: 'blur'
          }
        ]
      }
      if (this.showRoom === true) {
        obj.roomPrice = [
          { required: true, message: '请输入房间价格', trigger: 'blur' }
        ]
        obj.roomPriceHalfAm = [
          { required: true, message: '请输入房间价格', trigger: 'blur' }
        ]
        obj.roomPriceHalfPm = [
          { required: true, message: '请输入房间价格', trigger: 'blur' }
        ]
        obj.roomWeekendPrice = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' }
        ]
        obj.roomWeekendPriceHalfAm = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' }
        ]
        obj.roomWeekendPriceHalfPm = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' }
        ]
      }
      return obj
    },
    rules3 () {
      let obj = {
        notes: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
      return obj
    },
    ...mapGetters([
      'userInfo'
    ]),
    uploadDisabled: function () {
      return this.fileList1.length > 0
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 基本信息下一步
    onSelectStep (spaceInfoform) {
      this.$refs[spaceInfoform].validate((valid) => {
        if (valid) {
          // let imgurl = []
          // imgurl.push(this.fileList1)

          this.$axios.post('/api/space/addSpaceMessage', {
            spaceName: this.spaceInfoform.spaceName,
            avatar: this.fileList1,
            // avatar: JSON.stringify(this.fileList1).split('[').join('').split(']').join(''),
            cover: JSON.stringify(this.fileList2.url).split('[').join('').split(']').join(''),
            title: this.spaceInfoform.title,
            type: this.type,
            mobile: this.spaceInfoform.mobile,
            architecturalStyle: this.architecturalStyleList,
            feature: this.featureList,
            description: this.spaceInfoform.description,
            address: this.spaceInfoform.address,
            latLong: this.center,
            // latLong: this.center(Array.form(this.center)),
            // latLong: JSON.stringify(this.center),
            userId: this.userInfo.userId
          }).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              console.log(res)
              this.spaceId = res.id
              this.type = res.type
              if (this.type === 1) {
                this.showRoom = true
              } else {
                this.showRoom = false
              }
              this.activeNum = 2
            } else {
              this.$message.error('上传参数不完整')
            }
          })
        }
      })
    },
    //  图片上传上一步
    onPrevStepScd () {
      this.activeNum = 1
    },
    //  图片上传下一步
    onNextStepScd () {
      // this.imgPost()
      let arr = [{
        roomName: this.spaceInfoformImg.roomName,
        des: this.spaceInfoformImg.des,
        type: 1,
        paths: this.fileList3
      }]
      let o = this.spaceInfoformImg.rooms
      for (let i = 0; i < o.length; i++) {
        arr.push(
          o[i]
        )
      }
      let x = this.spaceInfoformImg.ypList
      for (let i = 0; i < x.length; i++) {
        arr.push(
          x[i]
        )
      }
      this.$axios.post('/api/space/addSpaceImg', {
        // id: 'FC1371191497',
        id: this.spaceId || this.$route.query.id,
        userId: this.userInfo.userId,
        addSteps: 1,
        rooms: arr
      }
      ).then(response => {
        const res = response.data
        console.log(res)
        if (res.code === '00000000') {
          this.activeNum = 3
          console.log(res)
        } else {
          this.$message.error('上传参数不完整')
        }
      })
    },
    beforeUpload () { },
    Change () { },
    // 设置价格上一步
    onPrevStepThd () {
      this.activeNum = 2
    },
    // 设置价格下一步
    onNextStepThr (spaceInfoformPrice) {
      this.$refs[spaceInfoformPrice].validate((valid) => {
        if (valid) {
          let yxjcqc = JSON.stringify(this.costPoints).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc2 = JSON.stringify(this.costPoints2).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc3 = JSON.stringify(this.costPoints3).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc4 = JSON.stringify(this.costPoints4).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc5 = JSON.stringify(this.costPoints5).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc6 = JSON.stringify(this.costPoints6).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          console.log(this.costPoints)
          this.$axios.post('/api/space/addSpacePrice', {
            id: this.spaceId || this.$route.query.id,
            userId: this.userInfo.userId,
            addSteps: 2,
            startTime: this.spaceInfoformPrice.startTime,
            endTime: this.spaceInfoformPrice.endTime,
            publicPrice: this.spaceInfoformPrice.publicPrice,
            roomPrice: this.spaceInfoformPrice.roomPrice,
            maxPeople: this.spaceInfoformPrice.maxPeople,
            // admissionEquipment: this.spaceInfoformPrice.admissionEquipment,
            admissionEquipment: yxjcqc,
            publicWeekendPrice: this.spaceInfoformPrice.publicWeekendPrice,
            roomWeekendPrice: this.spaceInfoformPrice.roomWeekendPrice,
            maxPeopleWeekend: this.spaceInfoformPrice.maxPeopleWeekend,
            admissionEquipmentWeekend: yxjcqc2,
            startTimeAm: this.spaceInfoformPrice.startTimeAm,
            endTimeAm: this.spaceInfoformPrice.endTimeAm,
            publicPriceHalfAm: this.spaceInfoformPrice.publicPriceHalfAm,
            roomPriceHalfAm: this.spaceInfoformPrice.roomPriceHalfAm,
            maxPeopleAm: this.spaceInfoformPrice.maxPeopleAm,
            admissionEquipmentAm: yxjcqc3,
            publicWeekendPriceHalfAm: this.spaceInfoformPrice.publicWeekendPriceHalfAm,
            roomWeekendPriceHalfAm: this.spaceInfoformPrice.roomWeekendPriceHalfAm,
            maxPeopleAmWeekend: this.spaceInfoformPrice.maxPeopleAmWeekend,
            admissionEquipmentAmWeekend: yxjcqc4,
            startTimePm: this.spaceInfoformPrice.startTimePm,
            endTimePm: this.spaceInfoformPrice.endTimePm,
            publicPriceHalfPm: this.spaceInfoformPrice.publicPriceHalfPm,
            roomPriceHalfPm: this.spaceInfoformPrice.roomPriceHalfPm,
            maxPeoplePm: this.spaceInfoformPrice.maxPeoplePm,
            admissionEquipmentPm: yxjcqc5,
            publicWeekendPriceHalfPm: this.spaceInfoformPrice.publicWeekendPriceHalfPm,
            roomWeekendPriceHalfPm: this.spaceInfoformPrice.roomWeekendPriceHalfPm,
            maxPeoplePmWeekend: this.spaceInfoformPrice.maxPeoplePmWeekend,
            admissionEquipmentPmWeekend: yxjcqc6
          }
          ).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              this.activeNum = 4
              console.log(res)
            } else {
              this.$message.error('上传参数不完整')
            }
          })
        }
      })
    },
    // 配套服务上一步
    onPrevStepFou () {
      this.activeNum = 3
    },
    // 确认添加
    addSpaces (spaceInfoformService) {
      this.$refs[spaceInfoformService].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/space/addSpaceSupportingServices', {
            id: this.spaceId || this.$route.query.id,
            userId: this.userInfo.userId,
            addSteps: 3,
            stayPriceFc: this.spaceInfoformService.stayPriceFc,
            stayPriceMd: this.spaceInfoformService.stayPriceMd,
            lunchPriceFc: this.spaceInfoformService.lunchPriceFc,
            lunchPriceMd: this.spaceInfoformService.lunchPriceMd,
            dinnerPriceFc: this.spaceInfoformService.dinnerPriceFc,
            dinnerPriceMd: this.spaceInfoformService.dinnerPriceMd,
            facilities: JSON.stringify(this.spaceInfoformService.facilities).split('/').join('').split('"').join('').split('[').join('').split(']').join(''),
            notes: this.spaceInfoformService.notes
          }
          ).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$router.push({ name: 'spaceControl' })
              console.log(res)
            } else if (res.code === '00000001') {
              this.$message({
                message: '添加失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 添加标签
    handleClose (tag) {
      this.architecturalStyleList.splice(this.architecturalStyleList.indexOf(tag), 1)
    },
    handleClose1 (tag1) {
      this.featureList.splice(this.featureList.indexOf(tag1), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    showInput1 () {
      this.inputVisible1 = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput1.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let architecturalStyle = this.architecturalStyle
      if (architecturalStyle) {
        this.architecturalStyleList.push(architecturalStyle)
      }
      this.inputVisible = false
      this.architecturalStyle = ''
    },
    handleInputConfirm1 () {
      let feature = this.feature
      if (feature) {
        this.featureList.push(feature)
      }
      this.inputVisible1 = false
      this.feature = ''
    },
    // 地图
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    syncCenterAndZoom (e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    // 上传图片
    uploadImg (a) {
      var formdata = new FormData()
      formdata.append('items', a.file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.uploadImgUrl, formdata, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '00000000') {
          // let imgUrl = []
          // imgUrl = res.data.url[0].url
          // console.log(imgUrl)
          this.fileList1.push({
            url: res.data.url[0].url
          })
          console.log(this.fileList1)
          // this.fileList1.push({
          //   url: res.data.url
          // })
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
      // console.log(this.imgUrl)
      // imgUrl.push({
      //   url: this.fileList1.url
      // })
      // this.fileList1.push({url: this.imgUrl})
      // console.log(this.fileList1)
    },
    // 上传图片限制
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }

      return isJPG && isLt2M
    },
    uploadImg1 (a) {
      var formdata = new FormData()
      formdata.append('items', a.file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.uploadImgUrl, formdata, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '00000000') {
          this.fileList2.url = res.data.url
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
    },
    submit () {
      this.formDate = new FormData()
      this.$refs.uploadb.submit()
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.uploadImgUrl, this.formDate, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '00000000') {
          this.fileList3 = res.data.url
          console.log(this.fileList3.url)
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
    },
    submit1 (room) {
      let i = this.spaceInfoformImg.rooms.indexOf(room)
      if (i !== -1) {
        console.log(this.$refs.upload[i])
        this.formDate = new FormData()
        console.log(this.formDate)
        this.$refs.uploada[i].submit()
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post(this.uploadImgUrl, this.formDate, config).then((res) => {
          console.log(res.data.code)
          if (res.data.code === '00000000') {
            this.fileList4[i] = res.data.url
            this.spaceInfoformImg.rooms[i].paths = this.fileList4[i]
            console.log(this.spaceInfoformImg.rooms[i].paths)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '图片上传不成功',
              type: 'warning'
            })
          }
        })
      }
    },
    submit2 (yp) {
      let index = this.spaceInfoformImg.ypList.indexOf(yp)
      if (index !== -1) {
        console.log(this.$refs.upload[index])
        this.formDate = new FormData()
        this.$refs.upload[index].submit()
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post(this.uploadImgUrl, this.formDate, config).then((res) => {
          console.log(res.data.code)
          if (res.data.code === '00000000') {
            this.fileList5[index] = res.data.url
            console.log(this.fileList5[index])
            this.spaceInfoformImg.ypList[index].paths = this.fileList5[index]
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '图片上传不成功',
              type: 'warning'
            })
          }
        })
      }
    },
    uploadImg2 (a, fileList) {
      this.formDate.append('items', a.file)
    },
    uploadImg3 (c, fileList) {
      this.formDate.append('items', c.file)
    },
    uploadImg4 (b, fileList) {
      this.formDate.append('items', b.file)
    },
    add (room, i) {
      // this.isShow1 = true
      this.spaceInfoformImg.rooms.push({
        roomName: '',
        des: '',
        type: 2,
        paths: []
      })
    },
    addYp (yp, index) {
      // this.isShow2 = true
      this.spaceInfoformImg.ypList.push({
        roomName: '',
        des: '',
        type: 3,
        paths: []
      })
    },
    del (item) {
      // var index = this.rooms.indexOf(item)
      // this.rooms.splice(index, 1)
      var i = this.spaceInfoformImg.rooms.indexOf(item)
      if (i !== 0) {
        this.spaceInfoformImg.rooms.splice(i, 1)
      }
    },
    delYp (item) {
      var index = this.spaceInfoformImg.ypList.indexOf(item)
      if (index !== 0) {
        this.spaceInfoformImg.ypList.splice(index, 1)
      }
    },
    checkinlist () {
      console.log(this.checkList)
    },
    checkBoxList (a, b) {
      console.log(a, b)
    },
    aaa (a) {
      console.log(a, this.costPoints)
    },
    print () {
      console.log(this.costPoints)
    }
    // handleSuccess (response, file, fileList) {
    //   console.log(fileList)
    //   // let key = response.key
    //   // let name = file.name
    //   // let prefix = this.supportWebp ? 'webp/' : ''
    //   // let img = `![${name}](${this.bucketHost}/${prefix}${encodeURI(key)})`
    //   this.spaceInfoform.avatar = response.data.url
    //   console.log(this.spaceInfoform.avatar)
    // }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.addSpace
  margin 16px
  background #fff
  min-height 800px
  padding-bottom 28px
  .content
    padding 16px
    display flex
    justify-content center
  .avatar-uploader .el-upload
    border 1px dashed #d9d9d9
    border-radius 6px
    cursor pointer
    position relative
    overflow hidden
  .avatar-uploader .el-upload:hover
    border-color #409EFF
  .avatar-uploader-icon
    font-size 28px
    color #8c939d
    width 178px
    height 178px
    line-height 178px
    text-align center
  .avatar
    width 178px
    height 178px
    display block
// .disabled .el-upload--picture-card
//   display none
.el-tag + .el-tag
  margin-left 10px
.button-new-tag
  margin-left 10px
  height 32px
  line-height 30px
  padding-top 0
  padding-bottom 0
.input-new-tag
  width 90px
  margin-left 10px
  vertical-align bottom
</style>
